@import "../css/colors"
@import "../css/vars"

:local(.btn > .content)
  display: flex
  flex-direction: column
  justify-content: space-between;
  align-items: center;
  margin: -1px
  width: 60px
  height: 60px
  overflow: hidden
  padding: 10px

  :local(.label)
    text-overflow: ellipsis;
    overflow: hidden
    align-self: flex-start;
    text-align: left;
    width: 70px
    display: inline-block;
    font-family: $sansserif
    font-size: 12px
    line-height: 14px
    text-transform: capitalize
    white-space: nowrap;
    //margin-top: 4px

  [class^="doka-icon-"]
    position: absolute;
    font-size: 50px
    bottom: 8px;

:local(.btn > .content.small),
:local(.btn > .content.xsmall)
    padding: 5px

    [class^="doka-icon-"]
      position: relative
      bottom: 0

:local(.btn > .content.small)
  width: 40px
  height: 40px

  [class^="doka-icon-"]
    margin-top: 5px
    font-size: 30px

:local(.btn > .content.xsmall)
  width: 30px
  height: 30px

  [class^="doka-icon-"]
    margin-top: 3px
    font-size: 26px

:local(.btn > .content.secondary)
  width: 58px
  height: 58px
  border: solid 1px $borderGray
  background-color: $white

  &:hover
    background-color: $darkGray

  :local(.label)
    width: 58px
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

:local(.btn > .content.active)
  color: $white
  background-color: $blue

:local(.btn > .checkboxify)
  [class^="doka-icon-mradioactive"], [class^="doka-icon-mradioinactive"],
  [class*="doka-icon-mradioactive"], [class*="doka-icon-mradioinactive"]
    position: absolute;
    font-size: 35px
    margin-bottom: 6px
    left: -5px;
    bottom: 10px;

:local(.btn > .checked)
  background-color: $blue
  color: $white

  [class^="doka-icon-mradioactive"], [class^="doka-icon-mradioinactive"],
  [class*="doka-icon-mradioactive"], [class*="doka-icon-mradioinactive"]
    font-size: 35px
    margin-bottom: 6px
    color: $white