@import "iugu-ux/core"
@import "compass/utilities/general/clearfix"

.iugu-ui
  .default-sdk-wrapper
    padding: 0px
  .default-optional
    margin-bottom: 15px
  .default-sdk-dialog
    width: 320px
    height: 480px
    margin-left: -160px
    margin-top: -240px
    position: absolute
    top: 50%
    left: 50%
    @include box-mode

    .container
      .padding
        padding: 40px

    .container
      width: 100%

      .actions
        .button
          margin-bottom: 6px

      .bottom_button_dialog
        &:hover
          background: #333

    .header
      width: 100%
      height: 60px
      background: #fff
      @include box-mode
      @include border-radius(4px 4px 0px 0px)
      padding: 20px
      padding-bottom: 0px
      border: none

      h1,h2,h3,h4,h5,h6
        margin: 0
        text-align: center
        line-height: 60px

    .social
      .text
        margin-top: $baseLineSpacing
        margin-bottom: $baseLineSpacing
        color: #666
        text-align: center
        display: block
      .facebook,.facebook:visited
        background: #4771A8
        color: #fff
        margin-bottom: $baseLineSpacing !important
      .twitter,.twitter:visited
        background: #39B6DE
        color: #fff
      .button:last-child
        margin-bottom: 0px !important
        
          

  &.settings .wrapper .container,.default-sdk-dialog

    .social
      table
        tr td
          width: 50%
      table tr td:first-child span
        display: block
        font-size: 13px
        text-transform: uppercase
        color: #666
        font-weight: bold
        padding: 15px
        padding-left: 10px
        padding-bottom: 0px

    input[type="text"],input.string,input.password,.button
      width: 100%

      .more-text
        float: none
        display: inline
        text-decoration: underline
        color: #090

    .text
      display: block
      text-align: center
      margin-top: 20px
      a,a:visited
        text-decoration: none
        color: #999
        font-size: 13px
        display: block
        &:hover
          color: #666
          text-decoration: underline

    .full-width
      width: 100%

@include for-small-screens()
  .iugu-ui
    .default-sdk-wrapper
      padding: 10px
    .default-optional
      margin-bottom: 0px
    .default-sdk-dialog
      width: 100%
      height: auto
      position: relative
      margin-left: auto
      margin-right: auto
      margin-top: auto
      left: auto
      top: auto


.iugu-ui.settings
  .wrapper
    max-width: 600px
    margin-left: auto
    margin-right: auto
    padding: 10px

    .header
      @include clearfix
      .button
        float: right

    .tabbed .nav li
      width: 50%

    .tabbed .container
      overflow: hidden

@include for-small-screens(390px)
  .iugu-ui,.iugu-ui.settings
    .wrapper
      .header
        width: 100%
        margin-top: 50px
        position: relative
        overflow: visible
        @include box-mode
        a
          text-align: center
          display: block
          img
            margin-bottom: $baseLineSpacing
        .button
          width: 100%
          float: none
          position: absolute
          top: -50px