src/components/LinkModal/LinkModal.scss
@import '../../constants/styles';
@import '../../constants/modal';
@import '../../constants/tabs';

.LinkModal {
  @extend %modal;
  font-size: 0.9em;

  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 400px;
    width: 480px;
    border-radius: 4px;
    background: var(--component-background);

    @include mobile {
      padding-top: 24px;
      padding-bottom: 16px;
      padding-inline-start: 24px;
      padding-inline-end: 24px;
      width: 100%;
      min-width: 100px;
    }

    .StylePopup {
      border-radius: 0px;
      box-shadow: none;
    }

    .divider-horizontal {
      width: 100%;
      height: 1px;
      margin-bottom: 8px;
      background: var(--divider);
    }

    @extend %tab-panel;

    @extend %tab-list;

    .linkInput {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }

    input[type='number'] {
      -moz-appearance: textfield;
    }

    form {
      width: 100%;
    }

    .tabs-header-container {
      padding: 16px;
      width: 100%;
    }

    .header {
      margin: 0;

      display: flex;
      align-items: center;
      width: 100%;
      height: 24px;

      p,
      label {
        font-size: 16px;
        font-weight: 700;
        width: 89.286%;
        margin: 0;
        margin-inline-end: 16px;
      }
    }

    .tab-list {
      font-size: 14px;
    }

    .tab-panel {
      overflow-y: visible;

      .panel-body {
        width: 100%;
        height: 140px;
        position: relative;
        padding: 0px 16px 16px 16px;
        font-size: 13px;
        border-radius: 4px;

        .add-url-link {
          display: flex;
          justify-content: center;
          height: 100%;
          flex-direction: column;
          background-color: var(--document-background-color);
          border-radius: 4px;

          .inputLabel {
            font-size: 13px;
            line-height: 16px;
            padding-inline-start: 16px;
            padding-bottom: 8px;
            font-weight: 700;
          }

          label.inputLabel {
            width: 100%;
            display: inline-block;
          }

          .linkInput {
            padding: 0 16px;

            input {
              width: 100%;
              height: 32px;
              padding-inline-start: 8px;
              font-size: 13px;
              box-sizing: border-box;
            }
          }
        }
      }
    }

    .footer {
      display: flex;
      padding: 16px;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      box-shadow: inset 0px 1px 0px var(--modal-stroke-and-border);
      margin: 0;

      .ok-button.Button {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--primary-button);
        border: none;
        color: var(--gray-0);
        padding: 6px 18px;
        width: auto;
        width: fit-content;
        border-radius: 4px;
        height: 28px;
        cursor: pointer;

        &:hover:not(:disabled) {
          background: var(--primary-button-hover);
        }

        &.disabled {
          background: var(--disabled-button-color) !important;
          cursor: not-allowed;

          span {
            color: var(--gray-0);
          }
        }
      }
    }

    input.urlInput,
    input.pageInput {
      &:focus {
        border-color: var(--outline-color);
      }

      &:active {
        border-color: var(--focus-border);
      }
    }

    @include tab-border-defaults;
  }
}
