@use './src/styles/variables' as *;
@use './src/styles/screen' as *;
@use './src/styles/layouts' as *;
@use './src/styles/colors' as *;

:host {
  .schedule-home-page-header {
    display: flex;

    schedule-direction-switch {
      @include gt-mobile() {
        width: 50%;
      }

      @include mobile() {
        flex: 1;
      }
    }
  }

  .schedule-controls {
    ::ng-deep .card {
      display: flex;
      flex-direction: column;
    }

    .schedule-home-page-header {
      margin: $space-xl;
    }

    .schedule-home-page-header-border {
      border-bottom: 1px solid $border;
    }

    @include mobile {
      .schedule-home-page-header {
        margin-left: 0;
        margin-right: 0;
      }

      .schedule-home-page-header-border {
        display: none;
      }

      ::ng-deep .card {
        padding: $space-xl $space-xl 0;
      }

      &__tabs {
        display: flex;
        flex-direction: column;
      }
    }
  }
}
