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

.CustomStampModal {
  @extend %modal;

  .modal-container {
    display: flex;
    flex-direction: column;
    width: 480px;
    padding: 0px;
    border-radius: 4px;
    background: var(--component-background);
    overflow: visible;
    max-height: 100%;

    @include mobile {
      width: 100%;
      border-radius: 0;
      inset-inline-start: 0;
      inset-block-end: 0;
    }

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

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

      .Button {
        position: static;
        height: 32px;
        width: 32px;
        border-radius: 4px;

        &:hover {
          background: var(--popup-button-hover);
        }

        &.selected {
          background: var(--popup-button-active);
          cursor: default;
        }
      }
    }

    .footer {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      justify-content: space-between;
      margin: 0;
      inset-block-start: 460px;
      padding: 16px;
      box-shadow: inset 0px 1px 0px var(--modal-stroke-and-border);

      .stamp-close {
        @include button-reset;
        color: var(--secondary-button-text);
        padding: 0 8px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
          color: var(--secondary-button-hover);
        }
      }

      .stamp-create {
        @include button-reset;
        background: var(--primary-button);
        border-radius: 4px;
        height: 32px;
        display: flex;
        align-items: center;
        padding: 8px 16px;
        min-width: 72px;
        width: fit-content;
        justify-content: center;
        position: relative;
        color: var(--primary-button-text);
        cursor: pointer;

        @include mobile {
          font-size: 13px;
        }

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

        &:disabled {
          background: var(--primary-button);
          opacity: 0.5;
          cursor: default;
        }
      }
    }
  }
}
