@import '~styles/config';

.toggleSetting {
  display: flex;
  flex-wrap: wrap;

  padding: $gutter 0;

  & + & {
    border-top: 1px solid $color-grey100;
  }

  &__title {
    @include responsive-font(16, 18);
    margin-bottom: 5px;
    font-weight: 600;
    @include grid-col(calc(100% - (48px + #{$gutter})));
  }

  &__toggle {
    @include grid-col(calc(48px + #{$gutter}));

    margin-top: -1px;
  }

  &__description {
    @include grid-col;
    @include responsive-font(14, 15);
    font-weight: 300;
  }

  &__content {
    @include grid-col;
    margin-top:16px;
  }

  // *******************************
  // Styles for ToogleSettingLoading
  &.loading {
    justify-content: space-between;
  }

  &.loading &__title {
    @include loadingTextDark;
    display: block;
    margin-bottom: 15px;

    height: 18px;
    width: 190px;
    max-width: 100%;
  }

  &.loading &__description {
    @include loadingTextDefault;
    display: block;

    height: 15px;
    width: 300px;
    max-width: 100%;
  }

}