@import '../settings';
@import '../colours';
@import '../mixins.scss';

$decorative-bar: 0.125rem solid $colour-vivid-cerulean;
$alt-decorative-bar: 0.25rem solid $colour-pastel-blue;

.decorated-list-item {
  $self: &;
  display: flex;
  align-items: baseline;
  padding: 0.25rem 0;
  align-items: stretch;

  &__title {
    flex-basis: 10vw;
    flex-shrink: 0;
    text-align: right;
    padding-right: 0.7rem;
    .tiny {
      line-height: 1;
    }
  }

  &__content {
    flex-grow: 1;
    padding-left: 0.7rem;
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    border-left: $decorative-bar;
    ul {
      margin-bottom: 0;
    }
  }

  &--compact {
    border-left: $decorative-bar;
    padding: 0 0 0 0.7rem;
    margin: 0;

    #{ $self }__title {
      font-size: 1rem;
      .tiny {
        line-height: 1;
        font-size: 1rem;
        margin: 0;
      }
      flex: 0;
      text-align: left;
      white-space: nowrap;
      margin-right: 0;
    }
    #{ $self }__content {
      font-size: 1rem;
      flex: 1;
      margin: 0;
      padding: 0;
      border-left: none;
    }
  }

  &--no-title {
    #{ $self } {
      margin-bottom: 0.5rem;
    }
    #{ $self }__title {
      display: none;
    }
  }

  // IMPORTANT: The parent should have set `display: inline-flex;` for this to work
  &--inline {
    flex-grow: 1;
    flex-basis: 0;
  }

  &--alt-style {
    border-left: $alt-decorative-bar;

    #{ $self }__title {
      padding: 0;
    }

    #{ $self }__content {
      h5 {
        margin: 0;
        line-height: 1.25;
        font-weight: 600;
      }
    }
  }

  & > a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    cursor: pointer;
  }

  // Lifted from card style
  &--has-link {
    transition: 0.5s background-color ease;
    position: relative; // Needed this otherwise the whole list becomes the anchor element

    &:hover,
    &:focus-within {
      background-color: scale-color($color: $colour-platinum, $lightness: 40%);
    }

    * {
      pointer-events: none;
    }

    a,
    button,
    input,
    label {
      pointer-events: initial;
    }
  }
}

@include breakpoint(small only) {
  .decorated-list-item {
    display: block;

    &__title {
      text-align: left;
    }
    &__content {
      border-left: none;
      padding-left: 0;
      padding-top: 0;
    }
  }
}