@import "../../base";
@import "../../../govuk/objects/grid";

@include govuk-exports("idsk/component/intro-block") {
    .idsk-intro-block {
        @include govuk-font($size: 19);

        .govuk-heading-xl {
            margin-bottom: 0;
                @include mq($from: desktop) {
                    @include govuk-font($size: 36, $weight: bold);
                }
            }

        .govuk-heading-l {
            margin-bottom: 0;

            @include mq($from: tablet) {
                @include govuk-font($size: 24, $weight: bold);
            }
        }

        .govuk-body{
            margin-bottom: govuk-spacing(4);
            @include mq($from: desktop) {
                margin-bottom: govuk-spacing(8);
            }
        }

        .govuk-grid-column-one-third-from-desktop {
            @include mq($from: desktop){
               width: calc(33.3333% - 50px);
            }
        }

        .govuk-heading-m {
          font-size: 24px;
          margin-top: govuk-spacing(4);

          &.heading-bigger-margin{
            @include mq($from: desktop) {
              margin-top: 37px;
            }
          }
        }

      & > .govuk-grid-row{
        @include mq($from: desktop) {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
        }
      }
    }

    .idsk-search-component {
      margin-bottom: 30px;
      @include mq($from: desktop) {
        margin-top: 50px;
        margin-bottom: 50px;
      }
    }

    .idsk-intro-block__list__ul {
        padding-left: 0;
        display: table;
        margin-top: 0;
        margin-bottom: govuk-spacing(4);
    }

    .idsk-intro-block__list__li {
        @include govuk-font($size: 16);

        display: inline-block;
        margin-right: govuk-spacing(4);
        margin-bottom: govuk-spacing(2);
    }

    .idsk-intro-block__list__a {
        white-space: nowrap;

        @include mq($until: tablet) {
          text-decoration: none;
          &:hover {
            text-decoration: underline;
          }
        }
      }

    .idsk-intro-block__list__li .govuk-link:active,
    .idsk-intro-block__list__li .govuk-link:link {
        color: govuk-colour("dark-grey");
    }

    .idsk-intro-block__side-menu {
        padding: govuk-spacing(4);
        @include mq($from: desktop) {
            margin-left: 35px;
        }

        @include mq($from: desktop) {
          background-color: govuk-colour("light-grey");
        }

        @include mq($until: tablet) {
          padding: 0 govuk-spacing(3);
        }

        .govuk-heading-s {
            @include mq($from: desktop) {
                font-weight: 400;
                margin-bottom: govuk-spacing(2);
                text-transform: uppercase;
            }

            @include mq($until: tablet) {
                font-weight: 700;
                font-size: 18px;
                line-height: 20px;
            }
        }
    }

    .idsk-intro-block__side-menu__default__ul {
        @include govuk-font($size: 19);

        display: contents;
        font-style: normal;
        font-weight: bold;
        text-align: right;
        -webkit-text-decoration-line: underline;
                text-decoration-line: underline;

        /* sass / link */
        color: govuk-colour("blue");
    }

    .idsk-intro-block__side-menu__ul {
        float: none;
        padding-bottom: govuk-spacing(4);
        display: contents;

        @include mq($from: desktop) {
            float: right;
            padding-bottom: 0;
        }
    }

    .idsk-intro-block__side-menu__li {
        padding-bottom: govuk-spacing(2);
    }

    .idsk-intro-block__side-menu__ul .idsk-intro-block__side-menu__li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    .idsk-intro-block__side-menu__default__li {
        display: table;
        float: none;
        margin: -20px 0;

        @include mq($from: desktop) {
            display: contents;
            float: right;
            padding-bottom: 0;
        }
    }

    #idsk-intro-block__side-menu__title .govuk-heading-l {
        padding-top: govuk-spacing(3);
        margin-bottom: govuk-spacing(2);

        @include mq($from: tablet) {
            padding-top: 0;
            margin-top: govuk-spacing(2);
        }
    }

    .idsk-intro-block__side-menu__default__subtitle {
        padding-top: govuk-spacing(5);
    }

    #idsk-intro-block__side-menu__title {
        padding-bottom: govuk-spacing(3);

        @include mq($from: desktop) {
            margin-top: govuk-spacing(1);
            width: 26%;
            float: right;
        }
    }

    .idsk-intro-block__side-menu__span {
        padding-top: govuk-spacing(3);
        padding-right: govuk-spacing(1);
    }

    .idsk-intro-block__bottom-menu__li {
        display: block;
        color: govuk-colour("black");
        padding-bottom: govuk-spacing(3);

        @include mq($from: desktop) {
            display: inline-grid;
            padding-bottom: 0;
            padding-right: govuk-spacing(4);
        }
    }

    .app-pane-grey {
        .govuk-heading-s {
            color: govuk-colour("black");
        }
    }

    div.app-pane-blue {
      @include mq($from: desktop) {
        background-color: govuk-colour("blue");
      }
    }

    .app-pane-transparent{
      background-color: transparent;
    }

    .app-pane-blue {
        .govuk-heading-l,
        .govuk-heading-s,
        .idsk-intro-block__side-menu__a,
        .idsk-intro-block__side-menu__li {
          @include mq($from: desktop) {
            color: govuk-colour("white");

            &:focus{
              color: govuk-colour("black");
            }
          }
        }
    }
}