@use './colors';

@mixin all {
  // Alerts
  .seam-alerts {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;

    &.seam-alerts-space-top {
      margin-top: 16px;
    }

    &.seam-alerts-padded {
      padding: 0 16px 24px;
    }
  }

  // Alert
  .seam-alert {
    width: 100%;
    min-height: 54px;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    gap: 16px;

    .seam-alert-action {
      appearance: none;
      height: 32px;
      padding: 0 10px;
      border-radius: 6px;
      background-color: transparent;
      font-size: 14px;
      line-height: 1;
      font-weight: 600;
      white-space: nowrap;
      cursor: pointer;

      &:hover {
        background-color: colors.$item-hover-bg;
      }
    }

    &.seam-warning-alert {
      background-color: colors.$alert-warn-fill;
      border: 1px solid colors.$alert-warn-line;

      .seam-alert-action {
        border: 1px solid colors.$alert-warn-dark;
        color: colors.$alert-warn-dark;
      }
    }

    &.seam-error-alert {
      background-color: colors.$alert-error-fill;
      border: 1px solid colors.$alert-error-line;

      .seam-alert-action {
        border: 1px solid colors.$alert-error-dark;
        color: colors.$alert-error-dark;
      }
    }

    &.seam-alert-space-top {
      margin-top: 16px;
    }

    .seam-alert-icon-wrap {
      padding: 7px 8px;
      padding-left: 0;
    }

    .seam-alert-icon {
      width: 24px;
      height: 24px;
      font-size: 24px;
    }

    .seam-alert-content {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      flex-direction: row;
    }

    .seam-alert-message-wrap {
      padding: 8px 0;

      .seam-alert-message {
        font-size: 14px;
        font-weight: 400;
        line-height: 134%;
        color: colors.$text-default;
      }
    }
  }

  @media only screen and (width <=500px) {
    .seam-alert {
      justify-content: flex-start;
      flex-direction: column;

      .seam-alert-content {
        width: 100%;
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
      }

      .seam-alert-action-wrap {
        width: 100%;

        .seam-alert-action {
          width: 100%;
        }
      }
    }
  }
}