$mask-image: 'backgrounds/ticket.svg';
$mask-image-white: 'backgrounds/ticket-white.svg';

.tickets,
.ticket {
  @extend %flexbox-column;
}

.ticket {
  justify-content: space-between;
  padding: $margin-normal $margin-double 0 $margin-triple;
  background-size: $ticket-mask-size $ticket-mask-size;
  border-bottom: 1px solid $color-tui-grey-25;
  overflow: hidden;
  border-radius: $border-radius-normal;
  width: auto;
  /* stylelint-disable declaration-no-important */
  &.tui-card {
    background: image-url($mask-image-white) 0 50% no-repeat;
    margin: 0 $margin-normal $margin-normal $margin-normal;
    width: auto !important;

    @include breakpoint(sm) {
      width: calc(#{percentage(1 / 4)} - #{$margin-normal}) !important;
    }

    &:link:hover,
    &:hover {
      box-shadow: none;
    }
  }
  /* stylelint-enable */
  .background-tui-white & {
    background-image: image-url($mask-image);
  }

  &:last-child {
    margin-bottom: 0;
  }

  @include breakpoint(sm) {
    padding: $margin-triple $margin-double $margin-normal;
    width: calc(#{percentage(1 / 4)} - #{$margin-normal});

    &.tui-card {
      background-position: 50% 0;
      margin: 0 $margin-half $margin-normal $margin-half;
    }
  }

  @include breakpoint(md) {
    padding: $margin-double $margin-double $margin-normal $margin-quadruple;

    &.tui-card {
      background-position: 0 50%;
    }
    min-height: 135px;
  }

  h3 {
    color: $color-link-blue;
    flex-grow: 1;

    &:hover {
      color: $color-link-blue-hover;
    }
  }

  .offer-block {
    text-align: right;
    margin: 0 0 $margin-normal;
  }

  &:nth-child(n),
  &:nth-child(n):hover {
    box-shadow: none;
  }
}

.tickets {
  margin: 0 0 $margin-normal;

  @include breakpoint(sm) {
    margin: 0 -#{$margin-normal} $margin-normal;
    flex-flow: row wrap;
  }
}