@import '../../settings/_Colors.styl'
@import '../../settings/_Shadows.styl'
@import '../../settings/_Typography.styl'
@import '../../settings/_MediaSizes.styl'
@import '../../settings/_Margins.styl'

.layout-settings
  display: flex
  flex-direction: column
  flex-grow: 1
  .title-bar
    box-shadow: shadow-box
    z-index: 95
  .title
    margin: 1rem 0
    padding: 0
    display: flex
    align-items: center
    flex-grow: 0
    margin-left: 6rem
    img
      background-color: transparent
      cursor: pointer
      transition: background 320ms ease
      border-radius: 100%
      &:hover
        background-color: white
    h3
      margin-left: 2.5rem
  .content
    display: flex
    flex-grow: 1
    background-color: white
    padding-top: margin-A4 + margin-A1
    justify-content: center
    @media size-M
      padding-left: grid-margin-M
      padding-right: grid-margin-M

.settings-list
  display: flex
  flex-direction: column
  list-style: none
  margin-bottom: 2 * margin-B1
  @media size-M
    width: (100%/12) * 10
  @media size-L
    width: 8 * column-L + 7 * gutter-L
  @media size-XL
    width: 8 * column-XL + 7 * gutter-XL
  .settings-option
    a
      color: color-gray-dark
      align-items: center
      border-top: 2px solid color-gray-ultralight
      display: flex
      flex-grow: 0
      height: 120px
      padding: 0 20px
      transition: background 320ms ease
      &:hover
        background-color: color-option-hover
        cursor: pointer
    &:last-child
      border-bottom: 2px solid color-gray-ultralight
    .icon
      width: 64px
      height: 64px
    .text
      display: flex
      flex-direction: column
      margin-left: 40px
      flex-grow: 1
      .option-title
        font-size: 1.5em
        font-weight: weight-medium
      .subtext
        margin: 0.25rem 0
        font-weight: weight-regular
    .icon-link
      height: 23px

.settings-detail-list
  display: flex
  flex-direction: column
  list-style: none
  margin-bottom: 2 * margin-B1
  @media size-M
    width: (100%/12) * 6
  @media size-L
    width: 4 * column-L + 3 * gutter-L
  @media size-XL
    width: 4 * column-XL + 3 * gutter-XL

.save
  background-color: white
  position: fixed
  bottom: 0
  left: 0
  z-index: 90
  width: 100%
  display: flex
  flex-direction: column
  align-items: center
  padding: margin-A3 0
  border-top: 2px solid color-gray-ultralight
  .button
    @media size-L
      width: 4 * column-L + 3 * gutter-L
    @media size-XL
      width: 4 * column-XL + 3 * gutter-XL