@use "../atoms/buttons";


.dsa41.actor.merchant {

  .tab.goods.active {

    display: flex;
    flex-direction: column;

  }

  .tab.services.active {

    display: flex;
    flex-direction: column;

  }

  .merchant-goods {
    margin: 8px;
    columns: 2;
    gap: 16px;
    overflow-x: hidden;
    overflow-y: auto;

    .merchant-good {
      @include buttons.uncut_raised_button;

      width: 100%;
      display: grid;
      break-inside: avoid;

      grid-template-columns: 32px 1fr 32px;
      grid-template-rows: 16px 16px;
      grid-template-areas: "img title options" "img price options";

      .img {
        grid-area: img;
      }

      .name {
        grid-area: title;
      }

      button {
        grid-area: options;
        height: 100%;
      }

      .price {
        grid-area: price;
      }

    }


  }

  .services {

    padding: 8px;
    overflow-x: hidden;
    overflow-y: auto;

    .service {
      @include buttons.uncut_raised_button;

      display: grid;
      grid-template-columns: 32px 1fr 32px;
      grid-template-rows: 16px 16px;
      gap: 0 4px;
      grid-template-areas: "image name options" "image price options";
      position: relative;

      .name {
        grid-area: name;
      }

      .price {
        grid-area: price;
        position: relative;
        top: -2px;
      }

      img {
        grid-area: image;
        width: 32px;
        height: 32px;
        border-radius: 4px;
      }

      .availability {
        position: absolute;
        left: 0;
        bottom: 1px;
        width: 36px;

        color: gold;
        text-shadow: 1px 1px 1px #000;
        vertical-align: bottom;
        display: block;
        text-align: right;

        &::before {
          content: 'x';
        }

        &.infinite {
          width: 32px;
          bottom: -2px;

          &::before {
            content: '∞';
          }
        }
      }

      .actions {
        grid-area: options;
        align-self: end;
        height: 32px;
      }

      .description {
        grid-area: description;
        display: flex;
        flex-direction: column;

        label {
          flex: 0;
        }

        prose-mirror {
          flex: 1;
        }
      }

      &.editable {
        display: grid;
        grid-template-columns: 1fr 80px 120px 32px;
        grid-template-rows: 48px 1fr;
        gap: 8px;
        grid-template-areas: "name price availability options" "description description description description";

        .name {
          display: grid;
          grid-template-columns: 32px 1fr;
          grid-template-rows: 20px 1fr;
          grid-template-areas: "label label" "img name";

          label {
            grid-area: label;
          }

          img {
            grid-area: img;
          }

          input {
            grid-area: name;
          }
        }

        .availability {
          position: inherit;
          left: inherit;
          bottom: inherit;
          width: inherit;

          color: inherit;
          text-shadow: unset;
          vertical-align: unset;
          display: unset;
          text-align: unset;

          &::before {
            content: '';
          }
        }

        .actions {
          position: relative;
          bottom: -4px;
        }

      }

    }

    .editor {

      .pane {
        display: grid;
        grid-template-columns: 1fr 80px 120px 32px;
        grid-template-rows: 48px 1fr;
        gap: 8px;
        grid-template-areas: "name price availability options" "description description description description";

        .name {
          display: grid;
          grid-template-columns: 32px 1fr;
          grid-template-rows: 20px 1fr;
          grid-template-areas: "label label" "img name";

          label {
            grid-area: label;
          }

          img {
            grid-area: img;
            border: 1px inset rgba(0, 0, 0, 1);
            background: rgba(0, 0, 0, 0.5);
          }

          input {
            grid-area: name;
          }
        }

        .description {
          grid-area: description;
        }

        .availability {
          position: inherit;
          left: inherit;
          bottom: inherit;
          width: inherit;

          color: inherit;
          text-shadow: unset;
          vertical-align: unset;
          display: unset;
          text-align: unset;

          &::before {
            content: '';
          }
        }

        .actions {
          position: relative;
          bottom: -4px;
        }

      }
    }


  }

  section.tab > div {
    display: unset;
    flex-direction: unset;
    height: unset;
    gap: unset;
  }

}