@use "../../../../styles/colors" as colors;
@use "../../../../styles/variables" as vars;
@use "../../../../styles/fonts" as fonts;

// Angular renders the back link as a full-width solid button above the
// flights mini-list — same 285px column, blue fill, white text, 48px
// tall, LEFT-aligned label (Angular's `.details-back .p-button-label`
// sets `text-align: left` and the chevron sits on the left with a 15px
// margin).
.details-back-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: vars.$space-m;
  width: 100%;
  height: vars.$button-height;
  padding: 0 vars.$space-l;
  background: colors.$blue-light;
  color: colors.$white;
  border-radius: vars.$border-radius;
  text-decoration: none;
  font-size: fonts.$font-size-m;
  font-family: inherit;
  cursor: pointer;

  &:hover {
    background: colors.$blue-light--hover;
    color: colors.$white;
  }

  &__arrow {
    display: inline-block;
    font-size: 13px;
  }
}
