dictionary.scss

// color variables
$grayColr: gray;
$yellowgreen : yellowgreen;
$white : #fff;

// mixins
@mixin cursor {
  cursor: pointer;
}

@mixin margin($top, $right, $bottom, $left) {
  margin: $top $right $bottom $left;
}

@mixin maxWidth($data) {
  max-width: $data;
}

@mixin padding($top, $right, $bottom, $left) {
  padding: $top $right $bottom $left;
}

.dictionary-wrapper {
  @include margin(40px, auto, 0, auto);
  @include maxWidth(1440px);

  .dictionary-box {
    @include margin(20px, 0, 0, 0);

    .submit {
      @include cursor();
      @include padding(5px, 10px, 5px, 10px);
      background-color: $yellowgreen;
      color: $white;
    }

    input[type="text"] {
      @include margin(0, 20px, 0, 0);
      @include padding(3px, 10px, 3px, 10px);
    }

    #reset {
      display: none;
    }
  }

  .dictionary-container {
    @include margin(15px, 0, 0, 0);
    align-items: start;
    display: flex;
    justify-content: space-between;


    .help-note,
    .productdata {
      width: calc(100%/2);
    }

    .productdata {
      @include maxWidth(532px);

      div {
        border: 1px solid $grayColr;
        border-width: 0 1px 0;
        display: flex;

        &:first-child {
          border-top: 1px solid $grayColr;
        }

        p {
          display: flex;
          min-width: 70%;
        }

        span,
        input[type="text"] {
          @include padding(10px, 10px, 10px, 10px);
          border: 0;
          border-bottom: 1px solid $grayColr;
          border-right: 1px solid $grayColr;
          width: calc(100%/2);

          &:last-child {
            border-right: 0;
          }

          &.delete-item,
          &.edit-item {
            @include cursor();
            text-align: right;
            text-decoration: underline;
            width: 100px;
          }

        }
      }
    }
  }
}