@import 'src/app/styles/colors';
@import 'src/app/styles/font';
@import 'src/app/styles/variables';

.support-requests {
  margin: 0 24px;
  padding: 0;
  box-shadow: 0 3px 11px 0 $shadow-white, 0 3px 3px -2px $shadow-grey, 0 1px 8px 0 $shadow-dark-grey;

  &__header {
    color: $grey;
    display: flex;
    justify-content: space-between;
    padding: 24px 24px 8px;
    margin-bottom: 0;
  }

  &__title {
    font-size: $fs-medium;
    font-weight: $fw-lighter;
    margin: 0;
    line-height: 40px;
  }

  &__content {
    height: 427px;
    overflow-y: hidden;
    overflow-x: scroll;

    @media (max-width: $small) {
      height: auto;
    }
  }

  &__table {
    width: 100%;
  }

  &__table-row {
    height: 64px;
  }

  &__table-row-title {
    color: $dark-grey;
    font-size: $fs-small;
    font-weight: $fw-lighter;
    line-height: 24px;
    text-transform: uppercase;
    padding: 18.4px;
  }

  &__table-content {
    color: $dark-grey;
    font-size: $fs-small;
    padding: 20px;
  }

  &__content-badge {
    width: fit-content;
    border-radius: 32px;
    color: $white;
    text-align: center;
    padding: 5px 10px;
    font-size: 13px;
    box-sizing: border-box;
    font-family: "Roboto", "Helvetica", "Arial", sans-serif;
    font-weight: $fw-lighter;
    line-height: 1.75;
    letter-spacing: 0.45px;

    &::first-letter {
      text-transform: uppercase;
    }
  }
}

mat-menu {
  position: absolute;
}

.send {
  background-color: $green;
}

.pending {
  background-color: $yellow;
}

.declined {
  background-color: $pink;
}
