_fluid.scss

@import '../base/color';
@import '../base/breakpoint';

//SelectFluid
.sf {
  display: flex;
  flex-direction: column;
  .sf-header {
    .sf-header-title {
      color: $text-bright;
    }
    .sf-header-text {
      color: $text-dark;
    }
  }
  .sf-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
    .sf-link {
      margin: 1rem;
    }
  }
}

//FluidContainer
.fc-root {
  background-color: $dark-light-2;
  padding: 2rem 2rem 1rem 2rem;
  margin-bottom: 1rem;
  @media #{$large-phone} {
    padding: 1.5rem 1rem 1rem 1rem;
    margin-bottom: 0.5rem;
  }
  .fc-content {
    min-height: 31.875rem;
    @media #{$large-phone} {
      min-height: 23.875rem;
    }
    .fc-loader {
      min-height: 31.875rem;
      @media #{$large-phone} {
        min-height: 23.875rem;
      }
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

//FluidView
.fv-root {
  direction: 'rtl';
  .fv-nav-period {
    display: flex;
    flex-direction: row;
    & .nav-button {
      flex: 1;
      font-size: large;
    }
  }
  .fv-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 8.375rem;
    margin-bottom: 0.25rem;
  }
  .fv-footer {
    display: flex;
    justify-content: center;
    .fv-footer-compare {
      width: 100%;
      max-width: 58.75rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      & :hover {
        cursor: pointer;
      }
      & .fv-footer-label {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        color: $text-dark;
        &.selected {
          color: $text-white;
        }
      }
    }
    
    .fv-footer-challenge {
      width: 100%;
      max-width: 58.75rem;
      display: flex;
      flex-direction: row;
      align-items: center;
      & .fv-footer-label-padding {
        flex: 1;
        display: flex;
        justify-content: flex-start;
        padding-left: 0.75rem;
        color: $text-dark;
      }
    }
  }
}

//FluidSwipe
.fs-root {
  flex: 1;
  height: 22rem;
  @media #{$large-phone} {
    height: 14rem;
  }
  .fs-slide {
    min-height: 22rem;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    @media #{$large-phone} {
      min-height: 14rem;
    }
  }
}