.root
  modal()
  max-width 540px
  overflow hidden
  position relative

.header
  height 50px
  font-size 18px
  line-height 50px
  padding 0 15px
  color $ui-text-color
  margin-bottom 20px

.title
  font-size 36px
  font-weight 600

.control
  padding 25px 0px
  text-align center
  display: flex

.control-button
  width 240px
  height 220px
  margin 0 15px
  border $ui-border
  border-radius 5px
  color $ui-text-color
  colorDefaultButton()
  padding 10px
  &:focus
    colorPrimaryButton()

.control-button-icon
  font-size 48px
  margin-bottom 25px

.control-button-label
  font-size 18px
  line-height 32px
.control-button-description
  font-size 12px

.description
  color $ui-inactive-text-color
  text-align center
  margin-bottom 25px

.from-url
  color $ui-inactive-text-color
  text-align center
  margin-bottom 25px
  cursor pointer

apply-theme(theme)
  body[data-theme={theme}]
    .root
      background-color transparent

    .header
      color get-theme-var(theme, 'text-color')

    .control-button
      border-color get-theme-var(theme, 'borderColor')
      color get-theme-var(theme, 'text-color')
      background-color transparent
      &:focus
        colorThemedPrimaryButton(theme)

    .description
      color get-theme-var(theme, 'text-color')

for theme in 'dark' 'solarized-dark' 'dracula'
  apply-theme(theme)

for theme in $themes
  apply-theme(theme)